<template>
    <div class="selectChecked">
        <el-select v-model="value" filterable
            placeholder="请选择" multiple
            clearable
            @change='handleChange'
            ref='selectChecked'
            @visible-change="visibleChange"
            @remove-tag='removeTag'>
            <el-option
                v-for="item in list" :key="item.value" :label="item.label"
                :value="item.value"
                class="optionList"    
            >
                <template>
                    <div>
                        <span :style="listColor(item)">{{ item.label }}</span>
                    </div>
                </template>
            </el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    props: {
        iptAttritube: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            value: [],
            selLoading: false,
            list: [],
            num: 0
        }
    },
    mounted() {
        let data = JSON.parse(this.iptAttritube.checkBox)
        data.map(item => {
            this.list.push({
                label: item.value,
                value: item.value,
                color: item.color
            })
        })
    },
    methods: {
        visibleChange() {
            this.$nextTick(() => {
                this.styleSet()
            })
        },
        removeTag(val) {
             this.styleSet()
        },
        handleChange() {
            let value = {
                value: this.value.length > 0 ? JSON.stringify(this.value) : '',
                state: true
            }
            this.$nextTick(() => {
                this.styleSet()
            })
            this.$emit('handleChange', value)
        },
        listColor(c) {
            return {
                'background': (c.color).substr(0, 3) + 'a' + (c.color).substr(3, c.color.length - 4) + ', .1)',
                'color': c.color,
                'padding': '2px 7px',
                'border-radius': '3px',
                'font-size': '13px',
                'line-height': '22px',
                'display': 'inline-block'
            }
        },
        defaultData(d) {
            this.value = []
            d.map(item => {
                if(item.customFieldId == this.iptAttritube.id) {
                    this.value = JSON.parse(item.value)
                }
            })
            this.$nextTick(() => {
                this.styleSet()
            })
        },
        styleSet() {
            if(this.$refs.selectChecked.$children[0].$el.childNodes.length > 0) {
                this.$refs.selectChecked.$children[0].$children.map((item, i) => {
                    let d = this.list.find(res => { return res.value == item.$el.innerText })
                    if(d != undefined) {
                        item.$el.style.background = 
                            (d.color).substr(0, 3) + 'a' + (d.color).substr(3, d.color.length - 4) + ', .1)'
                        item.$el.style.color = d.color
                    } else {
                        item.$el.style.background = '#f4f4f5'
                        item.$el.style.color = '#333'
                    }
                })
            }
        },
        removeSure() {
            
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/ .el-tag.el-tag--info{
        transition: none;
    }
</style>